<template>
  <div class="container" id="container">
    <canvas id="canvas"></canvas>
    <!-- <canvas  id="canvas" @mousewheel.prevent="roller"></canvas> -->
    <!-- <p class="title" v-if="showTitle">鱼骨图</p> -->
    <div class="tooltip1" v-if="showTooltip1">
      <el-tooltip placement="top" style="font-size:20px; margin-top:4px">
        <div slot="content" class="content">
          1、越靠近靶心的部门对中标影响越大；<br />
          2、每个分支上越靠近中线的职务对中标影响越大。
        </div>
        <i class="el-icon-info" />
      </el-tooltip>
    </div>
    <el-button type="primary" class="big" icon="el-icon-zoom-in" @click="toBigger">图片放大</el-button>
    <el-button type="primary" class="normal" icon="el-icon-zoom-out" @click="toNormal">图片缩小</el-button>
    <el-button type="primary" icon="el-icon-full-screen" class="full-screen" @click="showFullScreen">全屏查看</el-button>
    <!--    <div class="tooltip">-->
    <!--      <el-tooltip content="点击放大按钮可放大图片，图片放大后点击空白处可拖拽；恢复按钮可等比例回调图片大小，完全恢复后图片不可拖拽。" placement="top" style="font-size:20px; margin-top:4px">-->
    <!--        <i class="el-icon-info" />-->
    <!--      </el-tooltip>-->
    <!--    </div>-->
    <full-screen-fish-bone render="el-dialog" ref="fullScreenRef" :isFullScreen="true" :model="model"></full-screen-fish-bone>
  </div>
</template>

<script>
/** mixins */
import { mixin_fishBone } from './mixin/mixin_fishBone'
/** 子组件 */
import fullScreenFishBone from '../../../src/views/mpm/mpmProjectFishBone/fullScreen'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
import $ from 'jquery'
/** VUE配置 */
export default {
  name: 'fishbone',
  mixins: [mixin_fishBone],
  components: { fullScreenFishBone },
  data() {
    return {
      options: {},
      urlPrefix: '/mpm/comments/',
      url: {
        // 额外的url
      },
      record: 3,
      initZoomOut: false
    }
  },
  props: {
    canEdit: {
      type: Boolean,
      default: true
    },
    model: {
      default: function() {
        return {}
      },
      type: Object
    },
    showTitle: {
      type: Boolean,
      default: false
    },
    showTooltip1: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    roller(e) {
      let direction = e.deltaY > 0 ? 'down' : 'up'
      if (direction === 'up') {
        if (this.record === 10) {
          return
        }
        // 滑轮向上滚动
        this.stage.zoomOut()
        this.record += 1
      } else {
        if (this.record === 0) {
          return
        }
        // 滑轮向下滚动
        this.stage.zoomIn()
        this.record -= 1
      }
    },
    showFullScreen() {
      this.$refs.fullScreenRef.visible = true
    },
    toBigger() {
      this.scene.mode = 'normal'
      this.stage.zoomOut()
      this.record += 1
    },
    toNormal() {
      if (this.record === 0) {
        return
      } else if (this.record === 10) {
        return
      } else if (this.record === 3) {
        // this.scene.centerAndZoom()
        this.stage.zoomIn()
        this.stage.centerAndZoom()
        this.record -= 1
        this.scene.mode = this.record === 0 ? 'select' : 'normal'
        return
      }
      this.stage.zoomIn()
      this.record -= 1
    },
    // 配置函数
    FishBone(options) {
      this.options = $.extend(this.defaults, this.options)
      this.validate()
      this.initHtmlCanvas()
      this.initJtoPoScene()
      this.initFinModelMap()
      this.initNextLevelCount()
      this.initMainBone()
      this.initLevel2Position()
      this.initLevel3Position()
      this.render()
      this.stage.centerAndZoom()
      if (this.initZoomOut) {
        this.stage.zoomOut()
      }
    },
    initFishBone(data) {
      if (data[0].children.length <= 4) {
        this.initZoomOut = true
      }
      this.options.jsonData = data
      this.options.dragable = true
      this.FishBone(this.options)
    },
    resize_canvas() {
      let canvas = document.getElementById('canvas')
      let width = document.getElementById('container').offsetWidth
      canvas.width = width
      canvas.height = 500
    }
  },
  mounted() {
    this.resize_canvas()
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  position: relative;
  text-align: center;
  height: 100%;
}
.big {
  position: absolute;
  right: 0px;
  top: 10px;
}
.normal {
  position: absolute;
  right: 0px;
  top: 45px;
}
.tooltip1 {
  position: absolute;
  left: 80px;
  top: 10px;
}
.full-screen {
  position: absolute;
  right: 0px;
  top: 80px;
}
/deep/ .el-scrollbar__thumb {
  display: none !important;
}
.title {
  position: absolute;
  left: 110px;
  top: 20px;
  font-size: 18px;
  font-weight: bolder;
  color: #333333;
}
.el-icon-info {
  color: #606266;
}
</style>
